<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script src="libs/vue.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="libs/element/index.css">
    <script src="libs/element/index.js"></script>
    <script src="libs/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <el-row type="flex" class="row-bg" justify="center" style="border: 1px solid blue;">
                <div>
                    <h1>头部</h1>
                </div>

            </el-row>
        </el-header>
        <el-main>

            <el-row>
                <div style="border: 1px solid red;height: 700px">
                    <div style="text-align: center">
                        <h1>哈哈,这是满格第一屏</h1>
                    </div>
                </div>
            </el-row>

            <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-col :span="20">

                    <div style="border: 1px solid red;height: 500px">
                        哈哈,这是第二屏
                    </div>
                </el-col>
            </el-row>

            <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-col :span="10">
                    <div style="border: 1px solid red;height: 500px;max-wight:30px;">
                        哈哈,这是第三屏
                    </div>
                </el-col>
                <el-col :span="10">
                    <div style="border: 1px solid red;height: 100px;max-wight:30px;">
                        头部文字
                        <el-button type="primary" @click="initData">主要按钮</el-button>
                    </div>

<!--                    <transition-group name="test1" tag="p" id="item1">-->
                        <div style="height: 40px;border: 1px solid blue;margin-top:5px;padding:10px;"
                             v-for="item in items" class="item1" v-bind:key="item">
                            {{item}}
                        </div>
<!--                    </transition-group>-->

                </el-col>
            </el-row>

            <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-col :span="4">
                    <!--拼接高度占位div-->
                    <div style="width: 100%; height: 100px;border: 1px solid blue; margin-top:5px;" v-for="item in items2Data">
                        {{ item.text }}
                    </div>
                </el-col>
                <el-col :span="18">
                    <div id="item2" style="margin-top: 0">
                        aaaaa
                        <transition-group name="test1" tag="p">
                            <div style="width: 100%; height: 100px;border: 1px solid blue; margin-top:5px;" v-for="item in items2" v-bind:key="item.id">
                                {{ item.text }}
                            </div>
                        </transition-group>
                    </div>

                </el-col>

            </el-row>

        </el-main>

        <el-footer>

            <el-row type="flex" justify="center" style="margin-top: 20px">
                底部内容
            </el-row>
        </el-footer>
    </el-container>

</div>


<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            items: [],
            isShow: false,
            item1Play: false,   // 存储item1是否已播放动画
            items2: [],
            // item2下面的div列表的高度加距离顶部距离
            item2DivHeight: 100 + 5,
            items2Data: [
                {
                    id: '1', text: 'aaaaa'
                },
                {
                    id: '2', text: 'bbbbb'
                },
                {
                    id: '3', text: 'ccccc'
                },
                {
                    id: '4', text: 'ddddd'
                },
                {
                    id: '5', text: 'eeeee'
                },
                {
                    id: '6', text: 'fffff'
                },
                {
                    id: '7', text: 'ggggg'
                },
                {
                    id: '8', text: 'wwwww'
                },
            ]
        },
        created() {
            /**
             * 监听滚动条 逻辑根据自己需求来哦
             */
            window.onscroll = () => {
                this.scroll();
            }

            // window.onscroll = function () {
            //     let scrollPos = this.getScrollTop();
            //     console.log("scrollPos：",scrollPos);
            //     if (scrollPos == 0) {
            //         alert("页面已到顶部")
            //     }
            // }

        },
        methods: {
            /**
             * 获取滚动条位置
             */
            getScrollTop() {
                let scrollPos;
                if (window.pageYOffset)
                {
                    scrollPos = window.pageYOffset;
                }
                else if (document.compatMode && document.compatMode != 'BackCompat')
                {
                    scrollPos = document.documentElement.scrollTop;
                }
                else if (document.body)
                {
                    scrollPos = document.body.scrollTop;
                }
                return scrollPos;
            },

            scroll() {
                let scrollPos = this.getScrollTop();
                console.log("scrollPos：",scrollPos);
                if (scrollPos == 0) {
                    // alert("页面已到顶部")
                }
                // this.listenerScroll(scrollPos);
                this.listenerScroll1(scrollPos);
            },
            listenerScroll(scrollPos){
                // item1距离顶部的高度
                let item1TopHeight = $( "#item1" ).offset().top;
                // 当前屏幕可视高度
                let lookHeight = $(window).height();

                // 如果当前屏幕滚动条高度+屏幕可视高度>item1距离顶部的高度时,则item1进入屏幕
                if ((scrollPos + lookHeight) > item1TopHeight) {
                    console.log('进来屏幕了');
                    // 当item1未播放时,再执行初始化数据的函数
                    if (!this.item1Play) {
                        console.log('开始播放动画');
                        this.initData();
                    }
                    this.item1Play = true;
                }

            },
            listenerScroll1(scrollPos){
                // item2距离顶部的高度
                let item2TopHeight = $( "#item2" ).offset().top;
                // item2的div实际高度
                let item2Height = this.item2DivHeight * (this.items2.length + 1);
                // 当前屏幕可视高度
                let lookHeight = $(window).height();

                console.log(scrollPos, lookHeight, item2TopHeight, item2Height);

                // 如果当前屏幕滚动条高度+屏幕可视高度>item2距离顶部的高度+item2本身div高度时,则item2滚动到底部
                if ((scrollPos + lookHeight) > item2TopHeight + item2Height) {
                    console.log('滚动到item2的底部了');
                    this.appendItem2();
                }

            },
            initData() {
                this.items = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
            },
            appendItem2() {

                if (this.items2.length < this.items2Data.length) {
                    this.items2.push(this.items2Data[this.items2.length])
                }

            },
            playAnimation() {
                console.log('播放动画');

            }
        },
        updated: function () {
            this.$nextTick(function () {
                //  仅在整个视图都被重新渲染之后才会运行的代码
                this.scroll();
            })
        }
    })
</script>

</body>
</html>